import { Utils } from '@/common/utils';

// 权限指令
export const permission: { created(el: HTMLElement, binding: any): void } = {
    created(el: HTMLElement, binding: any) {
        const { value }: { value: string[] } = binding;
        if (value && value.length > 0) {
            const is_permission = value.some((item: string) => {
                return ['1', '2'].includes(item);
            })
            is_permission ? '' : el.style.display = 'none';
        } else {
            throw new Error("没有权限值！示例：v-permission='['admin', 'editor']'")
        }
    }
}

// 权限cover
export const permissionCover: { mounted: (el: HTMLElement, binding: any) => void } = {
    mounted: (el: HTMLElement, binding: any) => {
        const { value: list, arg } = binding;

        if (list && list.length > 0) {
            const is_permission = list.every((item: string) => {
                return ['1', '2'].includes(item);
            });
            if (is_permission) return;
            const dom = document.createElement('div');
            dom.style.height = el.style.height;
            dom.style.width = el.style.width;
            dom.style.backgroundColor = 'rgba(239, 239, 239, .8)';
            dom.style.position = 'absolute';
            dom.style.zIndex = '99';
            dom.style.top = '0';
            dom.style.left = '0';
            dom.classList.add('flex', 'flex-ai-c', 'flex-js-c');
            const style = {
                out_padding: arg == 'X' ? '0 3.335em 0 3.335em' : '3em 0 1.66666em 0',
                out_class: arg == 'X' ? 'flex-js-b flex-ai-c' : 'flex-js-b flex-ai-c flex-dir',
            }
            dom.innerHTML =
                `<div
                    style="box-sizing: border-box;padding: ${ style.out_padding }"
                    class="font-color-white screen-height screen-width flex ${ style.out_class }">
                    <img
                        alt=" "
                        style="height: 6em; width: 6em" 
                        src="/static/permission.png"
                    />
                    <button
                        style="border: none; width: 16.5em!important;height: 2.75em!important;font-size: 0.6em"
                        class="bg-color-main font-color-white cursor-pointer">
                        立即登录/注册会员
                    </button>
                </div>`;
            el.appendChild(dom);
        } else {
            throw new Error("没有权限值！示例：v-permissionCover:X=''['1','2', '3', '2']''")
        }
    }
}

// 滑动动画指令
export const scrollAnimation: { unmounted: (el: HTMLElement, binding: any) => void; mounted: (el: HTMLElement, binding: any) => void }= {
    mounted: (el: HTMLElement, binding: any) => {
        el.dataset.active = binding.value;
        Utils.setIntersectionObserve().observe(el);
    },
    unmounted: (el: HTMLElement) => {
        Utils.setIntersectionObserve().observe(el);
    }
}
